<template>
    <div class="container">
      <div :class="['register-box', {'slide-up':flag}]">
              <h2 class="register-title"@click="flag=false">
                  <span>没有账号，去</span>注册
              </h2>
              <div class="input-box">

                    <input type="" placeholder="用户名">
                <input type="" placeholder="密码">
                <input type="" placeholder="确认密码">

              </div>
              <button>注册</button>
          </div>
          <div :class="['login-box',{'slide-up':!flag}]">
              <div class="center">
                  <h2 class="login-title" @click="flag=true">
                      <span>已有账号，去</span>登录
                  </h2>
                  <div class="input-box">
                    <van-form >
                        <!-- @submit="" -->
  <van-field
    v-model="from.username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="from.password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <!-- <van-button round block type="info" native-type="submit">提交</van-button> -->
  </div>
</van-form>
                  </div>
                  <button @click="getdata()">登录</button>

              </div>
          </div>
    </div>
  </template>
  <script>
  import {userData} from "@/api";
//   import { set } from '@/utils/session';
  import { set } from '@/utils/local';


  export default {
      components: {},
      props: {},
      data() {
        
          return {
            flag: false,
            from:{
                username:'',
                password:''
            },
            users:'',
            pass:''
          };
      },
      computed: {},
      created() {},
      mounted() {
      },
      methods: {
        async getdata(){
            let res =await userData(this.from)
            console.log(res)
            // set("userinfo",res.data)
            if(res.code==200){
                set("userinfo",res.data)
                this.$router.push("/index/my")
            }
           
        }
      },
      watch: {},
  };
  </script>
  <style scoped lang="less">
  .container{
      background-color: #222;
      width: 100vw;
      height: 700px;
      /* border-radius: 15px; */
      overflow: hidden;
      position: relative;
  }
  .container::after{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgb(150, 191, 183);
      /* background: url("../assets/bg.jpg") no-repeat; */
      background-size: 500px;
      background-position: left bottom;
      opacity: 0.8;
  }
  /* 注册区域（登录区域很多样式和注册区域的一样，故而一些统一的样式写在了一起） */
  .register-box{
      width: 70%;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      transition: 0.3s ease;
  }
  .register-title,
  .login-title{
      color: #fff;
      font-size: 27px;
      text-align: center;
  }
  .register-title span,
  .login-title span{
      color: rgba(0,0,0,0.4);
      display: none;
  }
  .register-box .input-box,
  .login-box .input-box{
      background-color: #fff;
      border-radius: 15px;
      overflow: hidden;
      margin-top: 50px;
      opacity: 1;
      visibility: visible;
      transition: 0.6s ease;
  }
  
  .register-box input,
  .login-box input{
      width: 100%;
      height: 30px;
      border: none;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      font-size: 12px;
      padding: 8px 0;
      text-indent: 15px;
      outline: none;
  }
  .register-box input:last-child,
  .login-box input:last-child{
      border-bottom: none;
  }
  .register-box input::placeholder,
  .login-box input::placeholder{
      color: rgba(0,0,0,0.4);
  }
  .register-box button,
  .login-box button{
      width: 100%;
      padding: 15px 45px;
      margin: 15px 0;
      background: rgba(0,0,0,0.4);
      border: none;
      border-radius: 15px;
      color: rgba(255,255,255,0.8);
      font-size: 13px;
      font-weight: bold;
      cursor: pointer;
      opacity: 1;
      visibility: visible;
      transition: 0.3s ease;
  }
  .register-box button:hover,
  .login-box button:hover{
      background-color: rgba(0,0,0,0.8);
  }
  /* 登录区域 */
  .login-box{
      position: absolute;
      inset: 0;
      top: 20%;
      z-index: 2;
      background-color: #fff;
      transition: 0.3s ease;
  }
  .login-box::before{
      content: "";
      background-color: #fff;
      width: 200%;
      height: 250px;
      border-radius: 50%;
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
  }
  .login-box .center{
      width: 70%;
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 40%;
      transform: translate(-50%,-50%);
  }
  .login-title{
      color: #000;
  }
  .login-box .input-box{
      border: 1px solid rgba(0,0,0,0.1);
  }
  .login-box button{
      background-color: #75a297;
  }
  /* 注册、登录区域收起 */
  .login-box.slide-up{
      top: 90%;
  }
  .login-box.slide-up .center{
      top: 10%;
      transform: translate(-50%,0%);
  }
  .login-box.slide-up .login-title,
  .register-box.slide-up .register-title{
      font-size: 16px;
      cursor: pointer;
  }
  .login-box.slide-up .login-title span,
  .register-box.slide-up .register-title span{
      margin-right: 5px;
      display: inline-block;
  }
  .login-box.slide-up .input-box,
  .login-box.slide-up .button,
  .register-box.slide-up .input-box,
  .register-box.slide-up .button{
      opacity: 0;
      visibility: hidden;
  }
  .register-box.slide-up{
      top: 6%;
      transform: translate(-50%,0%);
  }
  </style>
  